﻿<template>
    <div id="app">
        <mt-tabbar v-model="message" v-if="tabshow==true" fixed>
            <mt-tab-item id="首页">
                <img slot="icon" :src="icon1">
                <!--<img slot="icon" v-else :src="this.atabs[1]">-->
                首页
            </mt-tab-item>
            <mt-tab-item id="视频">
                <img slot="icon"  :src="icon2">
                <!--<img slot="icon" v-else :src="this.atabs[3]">-->
                视频
            </mt-tab-item>
            <mt-tab-item id="签到" v-if="type==2">
                <img slot="icon" :src="icon3">
                <!--<img slot="icon" v-else :src="this.atabs[5]">-->
                签到
            </mt-tab-item>
            <mt-tab-item id="消息">
                <img slot="icon"  :src="icon4">
                <!--<img slot="icon" v-else :src="this.atabs[7]">-->
                消息
            </mt-tab-item>
            <mt-tab-item id="我的">
                <img slot="icon" :src="icon5">
                <!--<img slot="icon" v-else :src="this.atabs[9]">-->
                我的
            </mt-tab-item>
        </mt-tabbar>
    </div>

</template>

<script>
    import Bus from '../bus.js'
    export default {
        name: 'app',
        data() {
            return {
                message: this.selected,
                icon1: require("../assets/images/icon_bottom_01_active.png"),
                icon2: require("../assets/images/icon_bottom_02.png"),
                icon3: require("../assets/images/icon_bottom_03.png"),
                icon4: require("../assets/images/icon_bottom_04.png"),
                icon5: require("../assets/images/icon_bottom_05.png"),
                atabs: [
                    ,
                    require("../assets/images/icon_bottom_01.png"),
                    require("../assets/images/icon_bottom_02_active.png"),
                    require("../assets/images/icon_bottom_02.png"),
                    require("../assets/images/icon_bottom_03_active.png"),
                    require("../assets/images/icon_bottom_03.png"),
                    require("../assets/images/icon_bottom_04_active.png"),
                    require("../assets/images/icon_bottom_04.png"),
                    require("../assets/images/icon_bottom_05_active.png"),
                    require("../assets/images/icon_bottom_05.png")
                ],
                index: this.propindex,
                tabshow: true,
                type: ""
            }
        },
        props: {
            selected: String,
            propindex: Number,
        },
        mounted: function () {
            var vm = this;
           
            // 用$on事件来接收参数
            Bus.$on('val', (data) => {

                if (data == "hide") {
                    vm.$data.tabshow = false;
                } else {
                    vm.$data.tabshow = true;
                }

            })
            Bus.$on('usertype', (data) => {

                vm.type = data;

            })


            // 用$on事件来接收参数
            Bus.$on('tab', (data) => {
               
                if (data != "") {
                    console.log("data" + data);
                    if (data == 1) {
                        vm.$data.index = 1;
                        vm.$data.message = '首页';
                       
                    }
                    else if (data == 2) {
                        vm.$data.index = 2;
                        
                        vm.$data.message = '视频';
                    }
                    else if (data == 3) {
                        vm.$data.index = 3;
                        vm.$data.message = '签到';
                    }
                    else if (data == 4) {
                        vm.$data.index = 4;
                        vm.$data.message = '消息';
                    }
                    else if (data == 5) {
                        vm.$data.index = 5;
                        vm.$data.message = '我的';
                        
                    }

                }

            })

        },
        watch: {
            message: function (val) {
                console.log(val);

                switch (val) {
                    case '首页':
                        this.$data.icon1 = require("../assets/images/icon_bottom_01_active.png");
                        this.$data.icon2 = require("../assets/images/icon_bottom_02.png");
                        this.$data.icon3 = require("../assets/images/icon_bottom_03.png");
                        this.$data.icon4 = require("../assets/images/icon_bottom_04.png");
                        this.$data.icon5 = require("../assets/images/icon_bottom_05.png");
                        this.$router.replace('/home');
                        this.$data.index = 1;
                     
                        break;
                    case '视频':
                        this.$data.icon1 = require("../assets/images/icon_bottom_01.png");
                        this.$data.icon2 = require("../assets/images/icon_bottom_02_active.png");
                        this.$data.icon3 = require("../assets/images/icon_bottom_03.png");
                        this.$data.icon4 = require("../assets/images/icon_bottom_04.png");
                        this.$data.icon5 = require("../assets/images/icon_bottom_05.png");
                        this.$router.replace('/video');
                        this.$data.index = 2;
                        break;
                    case '签到':
                        this.$data.icon1 = require("../assets/images/icon_bottom_01.png");
                        this.$data.icon2 = require("../assets/images/icon_bottom_02.png");
                        this.$data.icon3 = require("../assets/images/icon_bottom_03_active.png");
                        this.$data.icon4 = require("../assets/images/icon_bottom_04.png");
                        this.$data.icon5 = require("../assets/images/icon_bottom_05.png");
                        this.$router.replace('/sign');
                        this.$data.index = 3;
                        break;
                    case '消息':
                        this.$data.icon1 = require("../assets/images/icon_bottom_01.png");
                        this.$data.icon2 = require("../assets/images/icon_bottom_02.png");
                        this.$data.icon3 = require("../assets/images/icon_bottom_03.png");
                        this.$data.icon4 = require("../assets/images/icon_bottom_04_active.png");
                        this.$data.icon5 = require("../assets/images/icon_bottom_05.png");
                        this.$router.replace('/message');
                        this.$data.index = 4;
                        break;
                    case '我的':
                        this.$data.icon1 = require("../assets/images/icon_bottom_01.png");
                        this.$data.icon2 = require("../assets/images/icon_bottom_02.png");
                        this.$data.icon3 = require("../assets/images/icon_bottom_03.png");
                        this.$data.icon4 = require("../assets/images/icon_bottom_04.png");
                        this.$data.icon5 = require("../assets/images/icon_bottom_05_active.png");
                        this.$router.replace('/myinfo');
                        this.$data.index = 5;
                        break;
                }
            }
        },
        created() {
          //  var usertype = window.localStorage.getItem("usertype");
           // this.$data.usertype = usertype
            // this.$router.push('/home');
        }

    };
</script>

<style scoped>
</style>